<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="check">
        <input type="checkbox" class="all">
        <br>

        <input type="checkbox" class="one">
        <input type="checkbox" class="one">
        <input type="checkbox" class="one">
    </div>


    <script>

        function Check(ele) {
            this.oCheckBox = document.querySelector(ele);
            this.oAll = this.oCheckBox.querySelector('.all');
            this.oOnes = this.oCheckBox.querySelectorAll('.one');
            this.init();
        }
        Check.prototype.init = function () {
            // 绑定点击事件
            // 全选
            this.oAll.onclick = () => {   // this指向
                this.oOnes.forEach(v => {
                    v.checked = this.oAll.checked;
                })
            }

            // 反选
            this.oOnes.forEach(v => {
                v.onclick = () => {
                    // 判断每一个单选
                    for (var i = 0; i < this.oOnes.length; i++) {
                        if (!this.oOnes[i].checked) {
                            break;
                        }
                    }
                    this.oAll.checked = i === this.oOnes.length;
                }
            })
        }


        new Check('.check');

    </script>

</body>

</html>